import React, { useEffect, useState } from 'react';
import { Modal, Select, Button, message } from 'antd';
import { Input, Form } from 'antd';
import db from '@/utils/localstorage';
import { connect } from 'dva';
import { addGift, editGift } from '../service';
const formItemLayout = {
  labelCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 5,
    },
  },
  wrapperCol: {
    xs: {
      span: 24,
    },
    sm: {
      span: 24,
    },
    md: {
      span: 24,
    },
  },
};
const submitFormLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 10,
      offset: 5,
    },
  },
};
const CreateForm = props => {
  const { modalVisible, onCancel, dispatch, refresh, currentRecord } = props;
  const [shopList, setShopList] = useState([]);
  const [submitting, setSubmitting] = useState(false);
  const [form] = Form.useForm();
  const dbVenue = db.get("venue")
  useEffect(() => {
    dbVenue.id === '101' && (
      dispatch({
        type: 'cubeGift/fetchShopList',
        payload: {
          userId: db.get("user").userId
        }
      }).then((data) => {
        setShopList(data);
      })
    )
  }, [dbVenue]);
  const onFinish = async () => {
    const values = await form.validateFields();
    let result;
    if (currentRecord) {
      values.id = currentRecord?.id;
      result = await editGift(values);
    } else {
      result = await addGift(values);
    }
    if (result?.code === 0) {
      message.success(result.message)
      refresh && refresh();
      onCancel()
    }
  }
  return (
    <Modal
      destroyOnClose
      title="新建赠品"
      visible={modalVisible}
      onCancel={() => onCancel()}
      footer={null}
    >
      <Form
        name="basic"
        form={form}
        initialValues={{ ...currentRecord }}
      >
        <Form.Item
          label="赠品名称"
          name="name"
          required
          {...formItemLayout}
        >
          <Input placeholder="请输入" allowClear />
        </Form.Item>
        {
          dbVenue.id === '101' && (
            <Form.Item
              label="场馆"
              name="venueId"
              required
              {...formItemLayout}
            >
              <Select placeholder='请选择'>
                {shopList.map((item) => <Option key={item.id}>{item.name}</Option>)}
              </Select>
            </Form.Item>
          )
        }
        <Form.Item
          label="备注"
          name="depict"
          {...formItemLayout}
        >
          <Input placeholder="请输入" allowClear />
        </Form.Item>
        <Form.Item {...submitFormLayout}>
          <Button type="primary" onClick={onFinish} htmlType='submit' loading={submitting}>
            提交
          </Button>
          <Button
            style={{
              marginLeft: 8,
            }}
            onClick={() => onCancel()}
          >
            取消
          </Button>
        </Form.Item>
      </Form >
    </Modal >
  );
};

export default connect(({ loading, cubeGift }) => ({
}))(CreateForm);
